<template>
  <div class="pro-form-modal">
    <CardItem tab-name="传感器信息">
      <template #real>
        <div class="sensor-box">
          <div class="sensor-info">
            <div>
              <span>温度</span>
              <span>{{
                realTimeData.temperature ? realTimeData.temperature + '℃' : '-'
              }}</span>
            </div>
            <div>
              <span>湿度</span>
              <span>{{
                realTimeData.humidity ? realTimeData.humidity + '%rh' : '-'
              }}</span>
            </div>
            <div>
              <span>气压</span>
              <span>{{
                realTimeData.pressure ? realTimeData.pressure + 'hpa' : '-'
              }}</span>
            </div>
          </div>
        </div>
      </template>
      <template #history>
        <RangePickerCom
          v-model:timeValue="sensorTime"
          :searchApi="handleSensorSearch"
        >
          <div class="device-userate" ref="sensorRef"></div>
        </RangePickerCom>
      </template>
    </CardItem>
  </div>
</template>
<script setup lang="tsx">
import { ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill/src/liquidFill.js';
import 'echarts/theme/macarons';
import { getSensorWaveform } from '@/api/device';
import CardItem from '../comm/CardItem.vue';
import RangePickerCom from './RangePickerCom.vue';

interface Props {
  pageData: any;
  realTimeData: any;
}
const props = defineProps<Props>();
const sensorTime = ref<any>([]);

// 传感器历史数据查询
const handleSensorSearch = async () => {
  const res: any = await getSensorWaveform({
    code: props.pageData.code,
    startTime: sensorTime.value?.[0],
    endTime: sensorTime.value?.[1],
  });
  console.log(res, 'this.sensorTime[0]');
  if (res.code == 200) {
    for (const keys in res.data) {
      if (Array.isArray(res.data[keys])) {
        for (let index = 0; index < res.data[keys].length; index++) {
          if (res.data[keys][index] == 0) {
            res.data[keys][index] = res.data[keys][index - 1];
          }
        }
      }
    }
    sensorInit(res.data);
  }
};

// 传感器折线图初始化
const sensorRef = ref();
const sensorInit = (data: any) => {
  sensorRef.value.style.height = '600px';
  const sensorChart = echarts.init(sensorRef.value);
  let option = {
    // backgroundColor: "rgba(0, 21, 41, 0.35)",
    title: [
      {
        top: '3',
        text: '温度(C°)',
        textStyle: {
          color: '#fff',
        },
      },
      {
        top: '31%',
        text: '湿度(rh)',
        textStyle: {
          color: '#fff',
        },
      },
      {
        top: '65%',
        text: '气压(hpa)',
        textStyle: {
          color: '#fff',
        },
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false, //坐标轴两边留白
        data: data.xdata,
        axisLabel: {
          //坐标轴刻度标签的相关设置。
          // interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
          //	margin:15,
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
          },
          formatter: function (value: any) {
            return value.split('.')[0];
          },
          showMaxLabel: true,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: 'category',
        boundaryGap: false, //坐标轴两边留白
        data: data.xdata,
        axisLabel: {
          //坐标轴刻度标签的相关设置。
          // interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
          //	margin:15,
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
          },
          formatter: function (value: any) {
            return value.split('.')[0];
          },
          showMaxLabel: true,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },

        gridIndex: 1,
      },
      {
        type: 'category',
        boundaryGap: false, //坐标轴两边留白
        data: data.xdata,
        axisLabel: {
          //坐标轴刻度标签的相关设置。
          // interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
          //	margin:15,
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
          },
          formatter: function (value: any) {
            return value.split('.')[0];
          },
          showMaxLabel: true,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        // axisLine: {
        //   onZero: false,
        //   lineStyle: {
        //     color: "#E5E9ED",
        //     // opacity:0.2
        //   },
        // },

        gridIndex: 2,
      },
    ],
    yAxis: [
      {
        axisLabel: {
          textStyle: {
            color: '#fff',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .14)',
            type: 'dashed',
          },
        }, // 网格线
      },
      {
        gridIndex: 1,
        axisLabel: {
          textStyle: {
            color: '#fff',
          },
          formatter: function (value: any) {
            return value + '%';
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .14)',
            type: 'dashed',
          },
        }, // 网格线
      },
      {
        gridIndex: 2,
        axisLabel: {
          textStyle: {
            color: '#fff',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .14)',
            type: 'dashed',
          },
        }, // 网格线
      },
    ],
    grid: [
      {
        top: '5%',
        bottom: '72%',
      },
      {
        top: '38%',
        bottom: '38%',
      },
      {
        top: '72%',
        bottom: '5%',
      },
    ],
    series: [
      {
        name: '温度',
        type: 'line',
        showSymbol: false,
        data: data.temperatureData,
      },
      {
        name: '湿度',
        type: 'line',
        showSymbol: false,
        data: data.humidityData,
        xAxisIndex: 1,
        yAxisIndex: 1,
      },
      {
        name: '气压',
        type: 'line',
        showSymbol: false,
        data: data.pressureData,
        xAxisIndex: 2,
        yAxisIndex: 2,
      },
    ],
  };

  sensorChart.setOption(option);
};

const changeInitCalendarPage = () => {
  // let element = document.querySelectorAll(
  //   '.el-picker-panel__icon-btn.el-icon-arrow-left',
  // );
  // console.log(element, 'element');
  // if (element) element[element.length - 1].click();
  console.log('click--');
};
</script>
<style lang="scss" scoped>
.sensor-box {
  .sensor-info {
    display: flex;
    justify-content: space-between;

    > div {
      display: flex;
      flex-direction: column;
      font-size: 15px;
      color: var(--custom-sensor-info);

      > span:last-child {
        margin-top: 10px;
        color: var(--text-color);
      }
    }
  }
}
</style>
